<template>
  <div class="exam-analysis-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考试分析报告</span>
          <el-button type="primary" @click="exportReport">导出报告</el-button>
        </div>
      </template>

      <!-- 基本信息 -->
      <div class="exam-info">
        <h3>{{ examInfo.name }}</h3>
        <p>考试时间：{{ examInfo.startTime }} - {{ examInfo.endTime }}</p>
        <p>考试时长：{{ examInfo.duration }}分钟</p>
        <p>参考人数：{{ examInfo.totalStudents }}人</p>
      </div>

      <!-- 成绩分布图表 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <div ref="scoreDistributionChart" style="height: 400px"></div>
        </el-col>
        <el-col :span="12">
          <div ref="questionAnalysisChart" style="height: 400px"></div>
        </el-col>
      </el-row>

      <!-- 统计数据 -->
      <el-row :gutter="20" class="statistics-info">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">平均分</div>
            </template>
            <div class="statistics-value">{{ statistics.averageScore }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">最高分</div>
            </template>
            <div class="statistics-value">{{ statistics.highestScore }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">最低分</div>
            </template>
            <div class="statistics-value">{{ statistics.lowestScore }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">及格率</div>
            </template>
            <div class="statistics-value">{{ statistics.passRate }}%</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 试题分析 -->
      <div class="question-analysis">
        <h3>试题分析</h3>
        <el-table :data="questionAnalysis" style="width: 100%">
          <el-table-column prop="index" label="题号" width="80" />
          <el-table-column prop="type" label="类型" width="100">
            <template #default="scope">
              {{ questionTypeMap[scope.row.type] }}
            </template>
          </el-table-column>
          <el-table-column prop="score" label="分值" width="80" />
          <el-table-column prop="averageScore" label="平均得分" width="100" />
          <el-table-column prop="correctRate" label="正确率" width="100">
            <template #default="scope">
              {{ scope.row.correctRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度系数" width="100">
            <template #default="scope">
              {{ scope.row.difficulty.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="discrimination" label="区分度" width="100">
            <template #default="scope">
              {{ scope.row.discrimination.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

const route = useRoute()

const questionTypeMap = {
  single: '单选题',
  multiple: '多选题',
  blank: '填空题',
  programming: '编程题'
}

// 考试基本信息
const examInfo = reactive({
  name: 'C语言期中考试',
  startTime: '2024-04-01 14:00',
  endTime: '2024-04-01 16:00',
  duration: 120,
  totalStudents: 120
})

// 统计数据
const statistics = reactive({
  averageScore: 85.5,
  highestScore: 98,
  lowestScore: 60,
  passRate: 95.8
})

// 试题分析数据
const questionAnalysis = ref([
  {
    index: 1,
    type: 'single',
    score: 2,
    averageScore: 1.8,
    correctRate: 90,
    difficulty: 0.2,
    discrimination: 0.4
  },
  {
    index: 2,
    type: 'multiple',
    score: 4,
    averageScore: 3.2,
    correctRate: 80,
    difficulty: 0.4,
    discrimination: 0.6
  }
])

// 图表相关
let scoreDistributionChart = null
let questionAnalysisChart = null

onMounted(() => {
  initCharts()
})

const initCharts = () => {
  // 成绩分布图
  scoreDistributionChart = echarts.init(document.querySelector('#scoreDistributionChart'))
  scoreDistributionChart.setOption({
    title: {
      text: '成绩分布'
    },
    tooltip: {},
    xAxis: {
      data: ['60分以下', '60-70分', '70-80分', '80-90分', '90-100分']
    },
    yAxis: {},
    series: [{
      name: '人数',
      type: 'bar',
      data: [5, 15, 40, 45, 15]
    }]
  })

  // 试题得分率分析图
  questionAnalysisChart = echarts.init(document.querySelector('#questionAnalysisChart'))
  questionAnalysisChart.setOption({
    title: {
      text: '试题得分率分析'
    },
    tooltip: {},
    xAxis: {
      data: ['第1题', '第2题', '第3题', '第4题', '第5题']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [{
      name: '得分率',
      type: 'line',
      data: [90, 80, 85, 75, 88]
    }]
  })
}

const exportReport = () => {
  // 实现导出报告逻辑
  ElMessage.success('报告导出成功')
}
</script>

<style scoped>
.exam-analysis-container {
  padding: 20px;
}

.exam-info {
  margin-bottom: 30px;
}

.exam-info h3 {
  margin: 0 0 15px 0;
}

.exam-info p {
  margin: 5px 0;
  color: #606266;
}

.statistics-info {
  margin: 30px 0;
}

.statistics-header {
  text-align: center;
  font-size: 16px;
}

.statistics-value {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.question-analysis {
  margin-top: 30px;
}

.question-analysis h3 {
  margin-bottom: 20px;
}
</style> 